<template>
  <div class="flexContent">
    <!-- 随货单管理 -->
    <div class="searchBox">

      <el-form ref="form" label-position="left" label-width="auto">
        <div class="serFlexBox">
          <div class="inputBox">
            <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">

              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="是否入库">
                  <el-select v-model="sform.isInbound" placeholder="请选择入库状态" clearable style="width: 95%">
                    <el-option label="未入库" value="0"></el-option>
                    <el-option label="已入库" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="随货单编号" prop="printTime">
                  <el-input v-clearEmoji v-model.trim="sform.followNumber" placeholder="请输入" size="small" clearable
                    style="width: 95%" @keyup.enter.native="searchFn" />
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="要货单编号">
                  <el-input v-clearEmoji v-model.trim="sform.requireNumber" placeholder="请输入" size="small" clearable
                    style="width: 95%" @keyup.enter.native="searchFn" />
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="10" :xl="6">
                <el-form-item label="打印时间" prop="printTime">
                  <el-date-picker v-model="sform.printTime" clearable type="daterange" unlink-panels range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 95%" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="btnBox">
            <el-button @click.stop="searchFn" class="searchBtn" icon="el-icon-search">搜索</el-button>
            <el-button @click.stop="resetForm" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="add">
      <el-button class="addBtn" @click="toAddPage" v-has="'follow_print1'">打印随货单</el-button>
    </div>
    <div class="table" id="tableBox" v-height>
      <div style="flex:1;">
        <vxe-table :column-config="{ resizable: true }" border class="tablebox" ref="xTable1"
          :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 21 }" align="center" style="width: 100%"
          height="100%" size="medium">
          <vxe-column type="seq" title="序号" width="80" />
          <vxe-column field="followNumber" title="随货单编号"
            :min-width="elTableAdaptationWidth('followNumber', tableData)" />
          <vxe-column field="requireNumber" title="要货单编号"
            :min-width="elTableAdaptationWidth('requireNumber', tableData)" />
          <vxe-column field="warehouseName" title="仓库名称"
            :min-width="elTableAdaptationWidth('warehouseName', tableData)" />
          <vxe-column field="storeName" title="门店名称" :min-width="elTableAdaptationWidth('storeName', tableData)" />
          <vxe-column field="commodityAmount" title="点采总额（元）" min-width="150" />
          <vxe-column field="isInbound" title="是否入库" width="100">
            <template v-slot="{ row }">
              <el-tag size="small" v-if="row.isInbound == 1">已入库</el-tag>
              <el-tag type="info" size="small" v-else>未入库</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="isPrint" title="是否打印" width="100">
            <template v-slot="{ row }">
              <el-tag size="small" v-if="row.isPrint == 1">已打印</el-tag>
              <el-tag type="info" size="small" v-else>未打印</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="printTime" title="打印时间" min-width="150">
            <template v-slot="{ row }">
              <span>{{ row.printTime | parseTime }}</span>
            </template>
          </vxe-column>
          <vxe-column fixed="right" title="操作" width="200" v-if="$showFn(['follow_detail', 'follow_rprint'])">
            <template slot-scope="scope">
              <el-button type="text" @click="toDetail(scope.row)" v-has="'follow_detail'">详情</el-button>
              <el-button type="text" @click="repairPrint(scope.row)" v-has="'follow_rprint'">补打</el-button>
              <!-- <el-button type="text" style="color: red;"  @click="delRegionById(scope.row.id)">删除</el-button> -->
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="paginationBox">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,->, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getFollowTableStr,
  printFollow,
  checkPrinter,
} from "@/utils/printLODOP";
import {
  reqFollowManifestList,
  reqFollowManifestById,
} from "@/api/followManifest";
import { parseTime4 } from "@/utils";
// import { getFollowManifestList } from '@/api/warehouse'
export default {
  name: "FollowManifest",
  data() {
    return {
      isSearch: false,
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      sform: {
        isInbound: "",
        printTime: [],
        number: "",
        supplierId: "",
        userId: "",
        status: "",
        followNumber: '',
        requireNumber: ''
      },
      tableData: [],
      firstSupplierList: [],
      userList: [],
      statusList: {},
      printObj: {},
    };
  },
  computed: {
    openTime() {
      if (this.sform.printTime == null) {
        return "";
      }
      if (this.sform.printTime.length > 0) {
        return this.sform.printTime[0];
      } else {
        return "";
      }
    },
    endTime() {
      if (this.sform.printTime == null) {
        return "";
      }
      if (this.sform.printTime.length > 0) {
        return this.sform.printTime[1];
      } else {
        return "";
      }
    },
  },
  created() {
    this.getFollowManifestList();
  },
  methods: {
    async getFollowManifestList() {
      if (!this.isSearch) {
        this.sform = {
          printTime: [],
          isInbound: "",
          followNumber: '',
          requireNumber: '',
        };
      }
      let { pageNum, pageSize } = this.page;
      const res = await reqFollowManifestList({
        pageNum,
        pageSize,
        isInbound: this.sform.isInbound,
        openTime: this.openTime,
        endTime: this.endTime,
        requireNumber: this.sform.requireNumber,
        followNumber: this.sform.followNumber,
      });
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.page.pageSize = res.data.pageSize;
        this.page.pageNum = res.data.pageNum;
        this.page.total = res.data.total;
        const $table = this.$refs.xTable1
        $table.loadData(this.tableData);
      }
    },
    resetForm(formName) {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.sform = {
        isInbound: "",
        printTime: [],
        followNumber: '',
        requireNumber: '',
      };
      this.isSearch = false;
      this.getFollowManifestList();
    },
    toAddPage() {
      this.$router.push({
        path: "printFollowManifest",
      });
    },
    async toDetail(row) {
      let res = await reqFollowManifestById({ id: row.id });
      if (res.code === 200) {
        this.printObj = res.data;
        console.log(this.printObj);
      }
      let table = getFollowTableStr(this.printObj);
      let str = `<div style="padding:20px 25px 0">
                    <h1 style="text-align:center;font-size:26px;">数航供应链统一配送单</h1>
                    <div style="display:flex;justify-content: space-between;">
                      <span>随货单编号：${this.printObj.followNumber}</span>
                      <span>出货日期：${parseTime4(
        this.printObj.createTime
      )}</span>
                      </div>
                      <div style="max-height:250px;overflow:auto;">
                        ${table}
                        </div>
                      <div style="display:flex;justify-content: flex-start;">
                        <span style="margin-right:100px">出货人：</span>
                        <span style="margin-right:100px">送货人：</span>
                        <span style="margin-right:100px">接货人：</span>
                      </div>
                  </div>`;
      this.$alert(str, "随货单详情", {
        dangerouslyUseHTMLString: true,
        customClass: "alert-class",
        confirmButtonText: "导出",
        callback: (cab) => {
          if(cab == 'cancel') return ;
          printFollow(this.printObj, true);
        }
      });
    },
    repairPrint(row) {
      this.$confirm(`即将补打随货单，是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        if (!checkPrinter()) return;
        let res = await reqFollowManifestById({ id: row.id });
        if (res.code === 200) {
          this.printObj = res.data;
          printFollow(this.printObj);
          this.$message({ type: "success", message: "正在打印随货单" });
        } else {
          // this.$message.error(res.message);
        }
      });
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      this.getFollowManifestList();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getFollowManifestList();
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };

      this.isSearch = true;
      this.getFollowManifestList();
    },
  },
};
</script>

<style>
.alert-class {
  width: 800px;
}
</style>
